<template>
    <div class="weather-content">
        <div class="title">
            <h3>天气监测<span>Weather monitoring</span></h3>
        </div>
        <div class="weather-info">
            <div class="today">
                <div>
                    <font-awesome-icon class="icon-cloud-sun icon" :icon="['fas', 'cloud-sun']" />
                    <span>多云</span>
                </div>
                <div>
                    <font-awesome-icon class="icon-temperature-high icon" :icon="['fas', 'temperature-high']" />
                    <span>28&deg;</span>
                    <span>/</span>
                    <span>16&deg;</span>
                </div>
                <div class="air">
                    <p>今日气温</p>
                    <span>20&deg;</span>
                </div>
            </div>
            <div class="time-slot">
                <h3 class="sub-title">今日各时段天气</h3>
                <div class="timeline">
                    <div>
                        <p>17&deg;</p>
                        <font-awesome-icon class="icon-sun" :icon="['fas', 'sun']" />
                        <p>6:00</p>
                    </div>
                    <div>
                        <p>19&deg;</p>
                        <font-awesome-icon class="icon-sun" :icon="['fas', 'cloud-sun']" />
                        <p>9:00</p>
                    </div>
                    <div>
                        <p>23&deg;</p>
                        <font-awesome-icon class="icon-sun" :icon="['fas', 'sun']" />
                        <p>12:00</p>
                    </div>
                    <div>
                        <p>22&deg;</p>
                        <font-awesome-icon class="icon-sun" :icon="['fas', 'sun']" />
                        <p>15:00</p>
                    </div>
                    <div>
                        <p>17&deg;</p>
                        <font-awesome-icon class="icon-sun" :icon="['fas', 'cloud-sun']" />
                        <p>18:00</p>
                    </div>
                    <div>
                        <p>15&deg;</p>
                        <font-awesome-icon class="icon-sun" :icon="['fas', 'sun']" />
                        <p>21:00</p>
                    </div>
                </div>
            </div>
            <div class="time-slot">
                <h3 class="sub-title">未来6天天气</h3>
                <div class="timeline">
                    <div>
                        <font-awesome-icon class="icon-sun" :icon="['fas', 'cloud-sun']" />
                        <p>01/30</p>
                    </div>
                    <div>
                        <font-awesome-icon class="icon-sun" :icon="['fas', 'sun']" />
                        <p>01/31</p>
                    </div>
                    <div>
                        <font-awesome-icon class="icon-sun" :icon="['fas', 'cloud-sun']" />
                        <p>02/01</p>
                    </div>
                    <div>
                        <font-awesome-icon class="icon-sun" :icon="['fas', 'sun']" />
                        <p>02/02</p>
                    </div>
                    <div>
                        <font-awesome-icon class="icon-sun" :icon="['fas', 'cloud-sun']" />
                        <p>02/03</p>
                    </div>
                    <div>
                        <font-awesome-icon class="icon-sun" :icon="['fas', 'sun']" />
                        <p>02/04</p>
                    </div>
                </div>
            </div>
            <div id="option" class="chart"></div>
        </div>
    </div>
</template>

<script>
import Axios from 'axios'
export default {
    data() {
        return {
            cityData: '',
            weatherInfo: '',
        }
    },
    methods: {
        LineChart() {
            let myChart = this.$echarts.init(document.getElementById('option'))
            myChart.setOption({
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    //图例组件
                    data: [
                        {
                            name: '最高气温',
                        },
                        {
                            name: '最低气温',
                        },
                    ],
                    textStyle: {
                        color: '#fff',
                        fontSize: '12',
                    },
                    top: '10',
                    right: '20',
                    padding: [15, 0],
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: ['周一', '周二', '周三', '周四', '周五', '周六'],
                        axisLabel: {
                            color: '#fff',
                            margin: 10,
                            fontSize: 12,
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            color: '#fff',
                            margin: 10,
                            fontSize: 12,
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                //设置刻度线粗度(粗的宽度)
                                width: 1,
                                color: 'rgba(255,255,255,0.2)',
                                type: 'dashed',
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: '最高气温',
                        type: 'line',
                        areaStyle: {},
                        data: [5, 15, 18, 25, 22, 16],
                        itemStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: '#c280ff', // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: '#e7eaf1', // 100% 处的颜色
                                        },
                                    ],
                                    global: false, // 缺省为 false
                                },
                            },
                        },
                    },
                    {
                        name: '最低气温',
                        type: 'line',
                        areaStyle: {},
                        data: [10, 12, 16, 20, 13, 10],
                        itemStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: '#80ffff', // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: '#e7eaf1', // 100% 处的颜色
                                        },
                                    ],
                                    global: false, // 缺省为 false
                                },
                            },
                        },
                    },
                ],
            })
            setTimeout(function () {
                window.onresize = function () {
                    myChart.resize()
                }
            }, 200)
        },
    },
    mounted() {
        this.LineChart()
    },
}
</script>

<style lang="less" scoped>
@import '../../../assets/less/school.less';
.weather-content {
    width: 350px;
    padding-left: 15px;
    .weather-info {
        width: 100%;
        .today {
            width: 100%;
            margin-top: 10px;
            color: #fff;
            font-size: 14px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border: 1px solid #fff;
            background-image: linear-gradient(to right, #68519f, #83c1e1);
            div {
                .icon {
                    font-size: 20px;
                    margin-right: 10px;
                }
                span {
                    font-size: 16px;
                    color: rgb(0, 255, 255);
                }
            }
            .air {
                display: flex;
                flex-direction: column;
                align-items: center;
                p {
                    font-size: 12px;
                }
            }
        }
    }
    .time-slot {
        margin-top: 15px;
        .timeline {
            margin-top: 10px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            div {
                color: #fff;
                text-align: center;
                p {
                    font-size: 12px;
                }
            }
        }
    }
    .chart {
        width: 100%;
        height: 250px;
    }
}
</style>